<!DOCTYPE html>
<html lang="en">

	<head>
		<title>Unit test for tinyform.validate.js - auto validate</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">		
        <script>
            var win = window;
        </script>
		<!--<script src="../node_modules/jquery/dist/jquery.min.js"></script>-->
		<!--<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>-->
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="../src/tinyform.core.js"></script>
		<script src="../src/tinyform.data.js"></script>
		<script src="../src/tinyform.validate.js"></script>
		<link href="../node_modules/qunitjs/qunit/qunit.css" rel="stylesheet">
	</head>

	<body>
		<div id="qunit"></div>
		<div id="qunit-fixture"></div>
		<div class="container">
			<form id="form">
				<ol>
					<li>
						<label for="username">用户名</label>
						<input type="text" name="username" data-rule="required" data-msg="&l不能为空">
					</li>
					<li>
						<label for="">性别</label>
						<input type="radio" name="radio" value="男" data-rule="required" data-msg="请选择&l"> 男

						<input type="radio" name="radio" value="女"> 女
					</li>
					<li>
						<label for="">复选框</label>
						<input type="checkbox" name="checkbox" data-rule="required" data-msg="其它这个选不选都可以的">
					</li>
					<li>
						<label for="">下拉框(单选)</label>
						<select name="select1" id="" data-rule="required">
							<option value="1">第1项</option>
							<option value="2">第2项</option>
							<option value="3">第3项</option>
						</select>
					</li>
					<li>
						<label for="">下拉框(多选)</label>
						<select name="select2" id="" multiple="multiple" data-rule="required">
							<option value="1">第1项</option>
							<option value="2">第2项</option>
							<option value="3">第3项</option>
						</select>
					</li>
					<li>
						<label for="">备注</label>
						<textarea rows="" cols="" name="textarea" placeholder="请填写备注" 
							data-rule="required" data-msg="&p"></textarea>
					</li>
				</ol>
			</form>
		</div>
		<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
		<script>
			var form = TinyForm('#form', {
				validate: {
					auto: true,
					callback: function(e) {
						QUnit.test(e.name + "失去焦点，自动验证", function(assert) {
							delete e.field;
							assert.ok(1, JSON.stringify(e));
						});
					}
				}
			});
			var fields = form.getField();
			for(var field in fields) {
				fields[field].blur();
			}
			
		</script>
	</body>

</html>